<template>
  <div>
    <el-tag v-if="renderField.prop === 'onlineStatus'" :type="state.type">{{
      state.statusDict[renderField.prop as any][renderRow.onlineStatus]
    }}</el-tag>
    <el-tag v-if="renderField.prop === 'switchStatus'" :type="state.type">{{
      state.statusDict[renderField.prop as any][renderRow.switchStatus]
    }}</el-tag>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, inject } from "vue";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型

const gateway = inject("gateway") as any;

// BuildAdmin将自动为此组件传递五个Props
interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
}

const props = withDefaults(defineProps<Props>(), {});

const state: { statusDict: any; type: string } = reactive({
  statusDict: gateway.tags,
  type:
    gateway.tags[props.renderField.prop as any][
      props.renderRow.onlineStatus
    ] === "在线" ||
    gateway.tags[props.renderField.prop as any][
      props.renderRow.switchStatus
    ] === "开启"
      ? "success"
      : gateway.tags[props.renderField.prop as any][
          props.renderRow.onlineStatus
        ] === "离线"
      ? "info"
      : gateway.tags[props.renderField.prop as any][
          props.renderRow.switchStatus
        ] === "关闭"
      ? "danger"
      : "",
});

onMounted(() => {
  console.log(
    "TagVue单元格值",
    gateway.tags,
    gateway.tags[props.renderField.prop as any][props.renderRow.switchStatus]
  );
});
</script>
<style lang="scss" scoped></style>
